import React from "react";
import { Button, Space } from "antd";
import styled from "styled-components";
const Styled = styled.div`
  display: flex;
  align-items: center;
  border: 1px solid rgba(156, 163, 175, 1);
  padding: 15px;
  background-color: rgba(249, 250, 251, 1);
  border-radius: 8px;
  .ant-space-item {
    width: 100%;
    .queryBar-slot {
      width: 100%;
    }
  }
  .operate {
    display: flex;
    align-items: center;
    button {
      &:first-child {
        background-color: rgba(49, 108, 114, 0.1);
      }
      &:last-child {
        margin-left: 15px;
      }
    }
  }
`;

const QueryBar = (props) => {
  const { handleSearch, handleReset } = props;
  const children = React.Children.toArray(props.children);

  return (
    <Styled>
      <Space style={{ width: "100%" }}>{children}</Space>
      <div className="operate">
        <Button onClick={handleReset}>重置</Button>
        <Button type="primary" onClick={handleSearch}>
          搜索
        </Button>
      </div>
    </Styled>
  );
};

export default QueryBar;
